<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-07-16 11:24:24
 * @LastEditTime: 2022-07-27 10:52:40
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 上传
 * @FilePath: \vue3-element-plus-web\src\views\Demo\Upload\normal.vue
 * Copyright 版权声明
-->
<template>
  <div class="app-container">
    <uploader
      :autoStart="false"
      :options="options"
      :file-status-text="statusText"
      class="uploader-example"
    >
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <p>拖拽文件到这里上传</p>
        <uploader-btn>选择文件</uploader-btn>
        <uploader-btn :attrs="attrs">选择图片</uploader-btn>
        <uploader-btn :directory="true">选择文件夹</uploader-btn>
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'

export default {
  name: 'Monitor',
  computed: {
    ...mapGetters([
      'drawerVisible'
    ])
  },
  components: {
  },
  data() {
    return {
      options: {
        // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
        target: '//192.168.0.19:20002/file/upload', // 目标上传 URL
        chunkSize: 20 * 1024 * 1024, //分块大小
        fileParameterName: 'file', //上传文件时文件的参数名，默认file
        // maxChunkRetries: 3, //最大自动失败重试上传次数
        testChunks: true, //是否开启服务器分片校验
        // // 服务器分片校验函数，秒传及断点续传基础
        // checkChunkUploadedByResponse: function(chunk, message) {
        //   console.log(chunk)
        //   console.log(message)
        //   const objMessage = JSON.parse(message)
        //   if (objMessage.skipUpload) {
        //     return true
        //   }

        //   return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
        // },
        // 额外的自定义查询参数： form data里的参数 根据实际需要
        query: (file, chunk) => {
          return {
            ...file.params
          }
        },
        // 在header中添加的验证 根据实际需要
        headers: {
          'Auth': getToken()
        }
      },
      attrs: {
        accept: 'image/*'
      },
      statusText: {
        success: '成功了',
        error: '出错了',
        uploading: '上传中',
        paused: '暂停中',
        waiting: '等待中'
      }
    }
  },
  watch: {
  },
  created() {
  },
  activated() {
  },
  deactivated() {
  },
  methods: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
<style>
  .uploader-example {
    max-width: 880px;
    padding: 15px;
    margin: 40px auto 0;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  }
  .uploader-example .uploader-btn {
    margin-right: 4px;
  }
  .uploader-example .uploader-list {
    max-height: 440px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
